<template>
  <a-form ref="form" :model="formData" layout="vertical">
    <div class="form__box">
      <a-form-item :label="`数据绑定key`" field="dataIndex" >
        <template v-if="dataObj.mode === 'dataView'">
          <a-select v-model="formData.dataViewSel" allow-clear @change="changeDataViewSel">
            <a-option value="手填">手填</a-option>
            <a-option v-for="option in dataObj.queryGroupList" :key="option.groupId + ' ' + option.queryKey" :value="option.groupId + ' ' + option.queryKey" :disabled="dataObj.pageData.some(item => item.formData.dataIndex === option.groupId + ' ' + option.queryKey)" :title="(option.formName ? `${option.formName}_${option.columnName}` : option.columnName) + (option.aggregateId ?`（${option.funColumnAs}的函数条件）`:'')">{{ option.formName ? `${option.formName}_${option.columnName}` : option.columnName }}{{ option.aggregateId ?`（${option.funColumnAs}函数条件）`:'' }}</a-option>
          </a-select>
          <a-input v-model="formData.dataIndex" :disabled="formData.dataViewSel !=='手填'"></a-input>
        </template>
        <a-input v-else v-model="formData.dataIndex" :disabled="formData.notMod"></a-input>
        <field-linkage :formData="formData"></field-linkage>
      </a-form-item>
      <a-form-item :label="`字段名称`" field="name">
        <a-input v-model="formData.name"></a-input>
        <a-checkbox v-model="formData.hideTitle">隐藏标题</a-checkbox>
      </a-form-item>
      <a-form-item :label="`控件类型`" field="type">
        <a-select v-model="formData.type" @change="changeControlTypes($event,formData)">
          <a-option :value="item.value" v-for="item in typeOptions" :key="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`数据类型`" field="dataType">
        <a-select v-model="formData.dataType">
          <a-option :value="item.value" v-for="item in dataTypeOptions" :key="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`表单栅格`" field="wrapperCol">
        <a-input-number :step="1" :max="24" :min="6" v-model="formData.wrapperCol"></a-input-number>
      </a-form-item>
      <a-form-item :label="`选择内容`" field="defaultValue">
        <div class="opts_chunk">
          <div v-for="item in formData.opts" style="width: 100%" :key="`${item.key}`" :value="`${item.value}`">
            <div @change="checkboxChange(item)">
              <a-checkbox v-model="item.isCheck">
                <!-- {{ item.value }} -->
                <a-input v-model="item.value" @change="checkboxInputChange(item)" :disabled="item.isCheck" class="checkbox_input"></a-input>
              </a-checkbox>
              <icon-delete class="del_icon" @click="delOption(item.key)" />
            </div>
          </div>
        </div>
        <div style="width:98%;display: flex;">
          <a-input
            v-model="formData.selectText"
            style="margin-left:5px;margin-right:5px"
            placeholder="请输入选项"
          >
          </a-input>
          <a-button @click="addOption">添加</a-button>
        </div>
      </a-form-item>
      <a-form-item :label="`展示属性`" field="listStyleShow">
        <a-select v-model="formData.listStyleShow">
          <a-option value="text">文字展示</a-option>
          <a-option value="tag">标签展示</a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`标签颜色`" v-if="formData.listStyleShow ==='tag'" field="tagColor">
        <a-select v-model="formData.tagColor">
          <a-option :value="item.value" v-for="item in tagColorList" :key="item.value">
            {{ item.label }}
          </a-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="`操作属性`">
        <a-checkbox v-model="formData.hide">隐藏</a-checkbox>
        <a-checkbox v-model="formData.disabled">禁用</a-checkbox>
        <a-checkbox v-model="formData.desensitization">脱敏</a-checkbox>
      </a-form-item>
      <a-form-item :label="`校验`" field="required">
        <a-checkbox v-model="formData.required">必填</a-checkbox>
        <validate-key v-if="formData.required" :form-data="formData"></validate-key>
      </a-form-item>
      <a-form-item :label="`字段说明`" field="explain">
        <a-textarea v-model="formData.explain">必填</a-textarea>
      </a-form-item>
    </div>
  </a-form>
</template>
<script>
import { nanoid } from 'nanoid'
import { basicDefaultData, tagColorList, typeOptions } from '@/components/Form/base/options'
import FieldLinkage from '@/components/Form/base/fieldLinkage.vue'
import ValidateKey from '@/components/Form/base/validateKey.vue'
import { changeControlTypes, changeDataViewSel } from '@/mixins/methodsMixins'

export const defaultData = () => ({
  ...basicDefaultData(),
  dataIndex: '',
  name: '多选框',
  type: 'checkbox',
  opts: [

  ],
  defaultValue: [],
  wrapperCol: 24,
  dataType: 'list',
  checkboxVal: false
})
export const dataTypeOptions = [
  {
    label: 'string',
    value: 'string'
  },
  {
    label: 'long',
    value: 'long'
  },
  {
    label: 'int',
    value: 'int'
  },
  {
    label: 'float',
    value: 'float'
  },
  {
    label: 'double',
    value: 'double'
  },
  {
    label: 'list',
    value: 'list'
  }
]
export default {
  name: 'CheckboxInfo',
  components: { ValidateKey, FieldLinkage },
  inject: ['dataObj'],
  data () {
    return {
      rules: {
        name: [{ required: true, message: '必填' }]
      },
      dataTypeOptions,
      tagColorList,
      typeOptions
    }
  },
  computed: {
    formData () {
      return this.dataObj.pageData[this.dataObj.selectIndex]?.formData || {}
    }
  },
  watch: {
    formData: {
      immediate: true,
      handler (newVal) {
        if (newVal.name === undefined) {
          this.dataObj.pageData[this.dataObj.selectIndex].formData = defaultData()
        }
      }
    }
  },
  methods: {
    changeDataViewSel,
    changeControlTypes,
    onOptsChange (e) {
      console.log(e)
      // this.formData.defaultValue =
    },
    addOption () {
      if (this.formData.selectText) {
        if (!this.formData.opts) {
          this.formData.opts = []
        }
        this.formData.opts.push({ key: nanoid(), value: this.formData.selectText, label: this.formData.selectText, isCheck: false })
        this.formData.selectText = ''
      }
    },
    delOption (key) {
      const index = this.formData.opts.findIndex(item => item.key === key)
      console.log(key, index)
      this.formData.opts.splice(index, 1)
    },
    // 多选框添加
    checkboxChange (item) {
      if (item.isCheck) {
        this.formData.defaultValue.push(item.value)
      } else {
        const index = this.formData.defaultValue.findIndex(e => e === item.value)
        this.formData.defaultValue.splice(index, 1)
      }
    },
    // 多选输入框改变
    checkboxInputChange (item) {
      item.label = item.value
    }
  }
}
</script>

<style scoped lang="less">
.opts_chunk{
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  /deep/ .arco-radio-group{
    width: 100%;
  }
  .checkbox_input{
    width:150px;
    margin-bottom: 5px;
  }
  .del_icon{
    // color: red;
    font-size: 16px;
    position: absolute;
    right: 10px;
    cursor: pointer;
    line-height: 35px;
  }
  .del_icon:hover{
    color: red;
  }
}
</style>
